<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ETF交易数据展示</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        :root {
            --primary-color: #2c3e50;
            --positive-color: #ff4444;
            --negative-color: #00C851;
            --hover-bg: #f8f9fa;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            margin: 20px;
            background-color: #f8f9fa;
        }

        .container {
            width: 99.9%;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        thead {
            background: var(--primary-color);
            color: white;
            position: sticky;
            top: 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #dee2e6;
            word-break: break-word;
        }

        tbody tr:hover {
            background-color: var(--hover-bg);
        }

        .today-action {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: 500;
            cursor:pointer;
        }

        .noAction {
            background: #fffaf0;
            color: #000000;
        }
        .holding{
            background: #99ccff;
            color: #000000;
        }

        .buy {
            background: #ff4444;
            color: #000000;
        }

        .sell {
            background: #00C851;
            color: #000000;
        }

        .toggle-details {
            cursor: pointer;
            color: var(--primary-color);
            font-weight: 500;
            transition: 0.3s;
        }

        .toggle-details:hover {
            opacity: 0.8;
        }

        .trade-details {
            background: #f8f9fa;
        }

        .trade-table {
            width: 100%;
            margin: 10px 0;
            background: white;
        }

        .trade-table th {
            background: #e9ecef;
        }

        .positive { color: var(--positive-color); }
        .negative { color: var(--negative-color); }

        @media (max-width: 960px) {
            .container {
                border-radius: 0;
                margin: 0;
            }

            th, td {
                padding: 10px;
                font-size: 0.9em;
            }

            th:nth-child(3),
            td:nth-child(3),
            th:nth-child(4),
            td:nth-child(4) {
                display: none;
            }
        }

        .returns {
            font-weight: 600;
            font-size: 1.1em;
        }

        .ma20-diff {
            font-size: 0.9em;
            margin-left: 5px;
        }

        .ma20-up::after {
            content: "↑";
            color: var(--positive-color);
        }

        .ma20-down::after {
            content: "↓";
            color: var(--negative-color);
        }

         .loading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }










    </style>
</head>
<body>
<div class="container">
    <table id="etfTable">
        <thead>
        <tr>
            <th colspan="8" id="desc">正在加载</th>

        </tr>
        <tr>
            <th style="width: 10%">代码</th>
            <th style="width: 13%">名称</th>
            <th style="width: 12%">收盘价</th>
            <th style="width: 12%">MA20</th>
            <th style="width: 12%">波动率</th>
            <th style="width: 15%">总回报率</th>
            <th style="width: 12%">今日操作</th>
            <th style="width: 14%"></th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script>
            function openUrl(url) {
                   window.open(url, '_blank'); // '_blank' 会在新窗口或新标签页中打开URL
              }
            // 创建交易详情表格（优化后）
            function createTradeTable(etf) {
                const table = $("<table>").addClass("trade-table");
                const header = $("<tr>").append(
                    $("<th>").text("买入日期"),
                    $("<th>").text("卖出日期"),
                    $("<th>").text("买入价"),
                    $("<th>").text("买入原因"),
                    $("<th>").text("卖出价"),
                    $("<th>").text("卖出原因"),
                    $("<th>").text("收益率")
                );

                table.append(header);

                $.each(etf.trades, function(i, trade) {
                    const returnRate = parseFloat(trade.returnRate);

                    $("<tr>").append(
                        $("<td>").text(formatDate(trade.buyDate)),
                        $("<td>").text(formatDate(trade.sellDate)),
                        $("<td>").text(trade.buyPrice),
                        $("<td>").text(trade.buyReason),
                        $("<td>").text(trade.sellPrice),
                        $("<td>").text(trade.sellReason),
                        $("<td>").addClass(returnRate >= 0 ? "positive" : "negative")
                            .text((returnRate * 100).toFixed(2)+"%")
                    ).appendTo(table);
                });

                return $("<div>").addClass("scroll-container").append(table);
            }

            function formatDate(dateStr) {
                return dateStr.replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3");
            }

            //获取url中的参数
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return unescape(r[2]);
                return null; //返回参数值
            }



        $(document).ready(function() {
         var loadUrl="/stock/result";
        var code=getUrlParam("code");
        if(code !=null){
            loadUrl=loadUrl+"/"+code;
        }else{
           loadUrl=loadUrl+"/510300";
        }

        $.ajax({url:loadUrl,success:function(data){
            var d=eval('(' + data + ')');
            $("#loading").hide();
            var pe=d.pe300;
            var pe500=d.pe500;
            var peCY=d.peCY;
            var peCanBuyCount=((pe-9)/pe/0.01).toFixed(0);
            var peHand=(20-pe)/11
            var maxmoney=600000;
            $("#desc").html(`
                总收益=${(d.totalReturn * 100).toFixed(2)}%<br/>
                300P滚动pe=${pe}<br/>
                500滚动pe=${pe500}<br/>
                创业滚动pe=${peCY}<br/>
                今日流入=${d.hotIn}<br/>
                今日流出=${d.hotOut}<br/>
            `)

         // 创建主表格
            $.each(d.result, function( index,etf) {
                const row = $("<tr>");
                const ma20Diff = (etf.stock.close - etf.stock.ma20).toFixed(3);
                const ma20Class = ma20Diff >= 0 ? 'ma20-up' : 'ma20-down';

                const buyRange=etf.atr21/etf.stock.close*100;
                const buyCount=Math.floor((10000/etf.stock.close)/100)*100;


                let todayAction = '<span class="today-action noAction">暂无信号</span>';
                if(etf.holding) todayAction = '<span class="today-action holding">持有中</span>';
                if(etf.toDayBuy) todayAction = '<span class="today-action buy">买入信号</span>';
                if(etf.toDaySell) todayAction = '<span class="today-action sell">卖出信号</span>';

                row.append(
                    $("<td>").text(etf.stock.stockCode),
                    $("<td>").text(etf.stock.stockName),
                    $("<td>").text(etf.stock.close),
                    $("<td>").html(`
                        ${etf.stock.ma20}
                        <span class="ma20-diff ${ma20Class}">(${ma20Diff})</span>
                    `),
                    $("<td>").html(`
                        网格=(±${buyRange.toFixed(2)}%)<br/>
                        数量=${buyCount}<br/>
                        每10%=${(10/buyRange*etf.stock.close*buyCount).toFixed(0)}
                        `),
                    $("<td>").addClass("returns").html(`
                        <span class="${etf.totalReturn >= 0 ? 'positive' : 'negative'}">
                            ${(etf.totalReturn * 100).toFixed(2)}%
                        </span>
                    `),
                    $("<td>").html(todayAction),
                    $("<td>").html(`<span class="toggle-details">▼ 交易记录</span>`)
                );

                // 交易详情
                const detailRow = $("<tr class='trade-details' style='display:none;'>").append(
                    $("<td colspan='7'>").append(createTradeTable(etf))
                );

                row.find(".toggle-details").click(function() {
                    detailRow.toggle();
                    $(this).html(detailRow.is(":visible") ? "▲ 收起" : "▼ 交易记录");
                });

                //添加点击事件
                row.find(".today-action").click(function() {
                    openUrl('http://8.138.24.62:8080/stock_minute_15.html?code='+etf.stock.stockCode);
                });

                $("#etfTable tbody").append(row).append(detailRow);
            });
         }});




        });










</script>
<div id="loading" class="loading-container">
    <div class="loading-spinner"></div>
</div>
</body>
</html>